<template>
	<div>
		<el-card shadow="hover" class="card_box">
			<el-row :gutter="15">
				<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
					<el-col :span="12">
						<el-form-item label="编号" prop="code">
							<el-input v-model="formData.code" placeholder="请输入教室编号" clearable :style="{width: '100%'}"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="学院" prop="value">
							<el-cascader v-model="formData.value" :options="collegeidOptions" :props="collegeidProps" :style="{width: '100%'}"
							 placeholder="请选择学院" clearable></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="种类" prop="value1">
							<el-cascader v-model="formData.value1" :options="typeOptions" :props="typeProps" :style="{width: '100%'}"
							 placeholder="请选择教室种类" clearable></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="规格" prop="value2">
							<el-cascader v-model="formData.value2" :options="sizeOptions" :props="sizeProps" :style="{width: '100%'}"
							 placeholder="请选择教室规格" clearable></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item size="large">
							<el-button type="primary" @click="submitForm">提交</el-button>
							<el-button @click="resetForm">重置</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item size="large">
							<input type="file" ref="myfile" size="medium"></input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item size="large">
							<el-button @click="handleClick()" type="success" size="medium">快速添加</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
		</el-card>
	</div>
</template>

<script>
	import {
		getAllCollege,
		addClassroom,
		upload2,
	} from '../../../api/system.js'
	export default {
		
		props: [],
		data() {
			return {
				formData: {
					code: undefined,
					collegeid: undefined,
					type: '',
					size: '',
					value: [],
					value1: [],
					value2: [],
				},
				rules: {
					code: [{
						required: true,
						message: '请输入教室编号',
						trigger: 'blur'
					}],
					value: [{
						required: true,
						type: 'array',
						message: '请至少选择一个学院',
						trigger: 'change'
					}],
					value1: [{
						required: true,
						type: 'array',
						message: '请至少选择一个学院',
						trigger: 'change'
					}],
					value2: [{
						required: true,
						type: 'array',
						message: '请至少选择一个学院',
						trigger: 'change'
					}],
				},
				collegeidOptions: [],
				typeOptions: [{
						name: '多媒体教室',
						id: '多媒体教室'
					},
					{
						name: '普通教室',
						id: '普通教室'
					}
				],
				sizeOptions: [{
						name: '小型（20人）',
						id: '小型（20人）'
					},
					{
						name: '中型（50人）',
						id: '中型（50人）'
					},
					{
						name: '大型（120人）',
						id: '大型（120人）'
					},
				],
				collegeidProps: {
					"multiple": false,
					"label": "name",
					"value": "id",
					"children": "children"
				},
				typeProps: {
					"multiple": false,
					"label": "name",
					"value": "id",
					"children": "children"
				},
				sizeProps: {
					"multiple": false,
					"label": "name",
					"value": "id",
					"children": "children"
				},
			}
		},

		methods: {
			submitForm() {
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
					this.formData.collegeid = this.formData.value[0];
					this.formData.type = this.formData.value1[0];
					this.formData.size = this.formData.value2[0];
					addClassroom(this.formData).then(res => {
						if (res.isok) {
							this.$message(res.data1);
						}
					});
				})
			},
			resetForm() {
				this.$refs['elForm'].resetFields()
			},
			getCollegeidOptions() {
				getAllCollege().then(res => {
					if (res.isok = true) {
						this.collegeidOptions = res.data1;
					}
				});
			},
			handleClick() {
				let myfile = this.$refs.myfile;
				// console.log(myfile);
				let files = myfile.files;
				let file = files[0];
				var formData = new FormData();
				formData.append("file", file);
				upload2(formData).then(res => {
					myfile.value = '';
					this.$message(res.data1);
				}).catch(error=>{
					myfile.value = '';
					this.$message("文件格式不对");
				})
			},
		},
		created() {
			this.getCollegeidOptions()
		},
	}
</script>

<style>
</style>
